<script type="text/ecmascript-6">
    /**
     * Created by wcz on 2017/1/7.
     */
    import b from '../bus'

    export default {
        data () {
            return {
                comments: [],
                pageIndex: 1,
                pageSize: 15,
                total: 0,
                imgVisible: false,
                pointImgSlim: '',
                pointMsg: '',
                searchForm: {
                    state: '2',
                    name: ''
                },
                withdrawCount: 0
            }
        },
        computed: {
            isListEmpty () {
                return (this.comments.length == 0)
            }
        },
        mounted () {
            this.getList();
            setInterval(() => {
                this.getCount();
            }, 5000)
        },
        methods: {
            getList (currentPage = 1) {
                let pd   = {};
                pd.p     = currentPage;
                pd.s     = this.pageSize;
                pd.state = this.searchForm.state;
                pd.name  = this.searchForm.name;

                this.get('/withdraw', pd, {loading: 'xhrPending', err: '获取提现列表失败'})
                    .then(res => {
                        if (res.success && res.data.rows) {
                            this.comments  = res.data.rows.map(e => {
                                let ele         = e;
                                ele.time        = e.create_at.split(' ')[0];
                                ele.confirmTime = e.last_update_at.split(' ')[0];
                                ele.ways        = e.payment.split(',');
                                ele.ways        = ele.ways.map(e => {
                                    return e.split(':').join('： ')
                                });
                                return ele
                            });
                            this.pageIndex = res.data.page + 1;
                            this.total     = res.data.total;
                        }
                    })
            },
            handleTabSelect (state) {
                this.searchForm.state = state;
                this.getList();
            },
            changeIndex (pi) {
                this.getList(pi)
            },
            viewImg (imgSrc, msg) {
                this.pointImgSlim = `${cdn}${imgSrc}?imageslim`;
                this.pointMsg     = msg;
                this.imgVisible   = true;
            },
            closeView () {
                this.imgVisible   = false;
                this.pointImgSlim = ''
            },
            search () {
                this.getList()
            },
            pass (id, isAccept) {
                this.$confirm(isAccept ? '确认支付已完成？' : '确认拒绝提现？', isAccept ? '支付已完成？' : '拒绝提现？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let postData = new FormData();
                    postData.append('id', id);
                    postData.append('cmd', isAccept ? 'accept' : 'reject');

                    axios({
                        url: host + '/withdraw',
                        withCredentials: true,
                        data: postData,
                        method: 'PUT'
                    }).catch(e => {
                        this.msg('网络出现异常，请稍后再试', 'error');
                        console.warn(e);
                    }).then(res => {
                        if (res.data.success) {
                            this.msg('操作成功!', 'success');
                            this.getList();
                            b.$emit('resCount');
                        } else {
                            this.msg(res.data.message || '确认失败，请稍后再试', 'warning');
                            this.getList()
                            b.$emit('resCount');
                        }
                    })
                }).catch(() => {
                });

            },
            getCount () {
                this.get('/withdraw/count?state=2').then(res => {
                    if (res.success) {
                        this.withdrawCount = res.data.count
                    }
                });
            }
        },
    };
</script>

<template>
    <div class="comments">
        <el-menu default-active="2" mode="horizontal" @select="handleTabSelect" layout="row center-left">
            <el-menu-item index="2">
                <el-badge :value="withdrawCount" :hidden="withdrawCount == 0">
                    待支付赏金
                </el-badge>
            </el-menu-item>
            <el-menu-item index="1">已支付账单</el-menu-item>
            <div self="right" class="cb__bar-right" layout="row center-justify">
                <el-input
                        class="tasks__tool-input"
                        icon="search"
                        placeholder="按申请人搜索"
                        @change="search"
                        v-model="searchForm.name">
                </el-input>
            </div>
        </el-menu>
        <!-- list-->
        <div class="comments__content" v-loading.body="xhrPending">
            <div class="wh-table">
                <div class="wh-table__thead" layout="row center-left">
                    <div class="th w14">申请人 / 手机号</div>
                    <div class="th w10">金额</div>
                    <div class="th w26">收款方式</div>
                    <div class="th w15">时间</div>
                    <div class="th w15">订单号</div>
                    <div class="th w15" v-if="searchForm.state == '2'"><i class="el-icon-more"></i></div>
                    <div class="th w15 tac" v-else>确认支付时间</div>
                </div>
                <div v-if="isListEmpty" class="wh-table__tbody--empty">无记录</div>
                <div v-else class="wh-table__tbody" layout="row center-left" v-for="(comment, index) in comments">
                    <div class="td w14">
                        <h5 class="wh-table__em">{{comment.name}}</h5>
                        <p class="">{{comment.phone}}</p>
                    </div>
                    <div class="td w10"><h5 class="wh-table__em">{{comment.amount}}</h5></div>
                    <div class="td w26">
                        <h5 class="wh-table__em" v-for="way in comment.ways">{{way}}</h5>
                    </div>

                    <div class="td w15">
                        <el-tooltip placement="top" :content="comment.create_at">
                            {{comment.time}}
                        </el-tooltip>
                    </div>
                    <div class="td w15">{{comment.flow}}</div>
                    <div class="td w15" v-if="searchForm.state == '2'" layout="row center-justify">
                        <el-button type="primary" @click="pass(comment.id, true)">确认已支付</el-button>
                        <el-button type="text" @click="pass(comment.id, false)">拒绝提现</el-button>
                    </div>
                    <div class="th w15 tac" v-else>
                        <el-tooltip placement="top" :content="comment.last_update_at">
                            {{comment.confirmTime}}
                        </el-tooltip>
                    </div>
                </div>
                <!-- pagination-->
                <div v-if="!isListEmpty" class="wh-table__page" layout="row center-center">
                    <el-pagination
                            @current-change="changeIndex"
                            :current-page="pageIndex"
                            :page-size="pageSize"
                            :total="total"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- viewImg-->
        <div v-if="imgVisible" class="img__modal" layout="column center-center">
            <i class="img__close el-icon-close" @click="closeView"></i>
            <p class="point__msg">{{pointMsg}}</p>
            <img :src="pointImgSlim" class="img__big"/>
        </div>
    </div>
</template>